<template>
    <div>
        <a-card>
            <p slot="title">
                检索条件
            </p>
            <div class="formSearch">
                <a-form :label-width="80" layout="inline" @keydown.native.enter.prevent='toSearch'>
                    <template v-if="who === 'imageList'">
                        <a-form-item label="名称：" prop="searchKey">
                            <a-input v-model="queryParam.searchKey" placeholder="请输入名称" style="width: 220px"
                                     @keyup="formatEnterContent(queryParam.searchKey,'searchKey')"
                                     @blur="formatEnterContent(queryParam.searchKey,'searchKey')"
                            >
                                <a-icon slot="prefix" type="user" class="displayPre" />
                                <a-icon v-if="queryParam.searchKey" slot="suffix" type="close-circle"
                                        @click="emitEmpty('queryParam', 'searchKey')" />
                            </a-input>
                        </a-form-item>
                        <a-form-item label="类型：" prop="operate">
                            <a-select v-model="queryParam.type" allowClear style="width:220px"
                                      placeholder="全部">
                                <a-select-option v-for="item in typeList" :value="item.value" :key="item.value">{{item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </template>
                    <template v-else-if="who === 'logList'">
                        <a-form-item label="类型：" prop="searchKey">
                            <a-input v-model="queryParam.searchKey" placeholder="请输入类型" style="width: 220px"
                                     @keyup="formatEnterContent(queryParam.searchKey,'searchKey')"
                                     @blur="formatEnterContent(queryParam.searchKey,'searchKey')"
                            >
                                <a-icon slot="prefix" type="user" class="displayPre" />
                                <a-icon v-if="queryParam.searchKey" slot="suffix" type="close-circle"
                                        @click="emitEmpty('queryParam', 'searchKey')" />
                            </a-input>
                        </a-form-item>
                    </template>
                    <template v-else>
                        <a-form-item label="IP地址：">
                            <a-input v-model="queryParam.ip" placeholder="请输入IP地址" style="width: 220px"
                                     @keyup="removeSpecialChart(queryParam.ip,'ip')"
                                     @blur="removeSpecialChart(queryParam.ip,'ip')"
                            >
                                <a-icon slot="prefix" type="user" class="displayPre" />
                                <a-icon v-if="queryParam.ip" slot="suffix" type="close-circle"
                                        @click="emitEmpty('queryParam', 'ip')" />
                            </a-input>
                        </a-form-item>
                        <a-form-item label="VlAN类型" v-if="who === 'vlanManage'">
                            <a-select :allowClear="true" v-model="queryParam.progress" placeholder="请选择" style="width: 220px">
                                <a-select-option v-for="item in vlanTypeList" :key="item.value" :value="item.value">
                                    {{item.label}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item label="状态" v-else>
                            <a-select :allowClear="true" v-model="queryParam.progress" placeholder="请选择" style="width: 220px">
                                <a-select-option v-for="item in hostStatusList" :key="item.code" :value="item.code">
                                    {{item.codeValue}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </template>
                    <a-button type="primary" @click="toSearch">查询</a-button>
                    <a-button style="margin-left: 8px" @click="reStore">重置</a-button>
                </a-form>
            </div>
        </a-card>
        <div style="height: 10px"></div>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import moment from 'moment'
    import verify from 'libs/verify'
    const regSearchText = /^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/
    export default {
        name: 'search-component',
        data () {
            return {
                verify,
                progressList: [
                    {
                        value: '0', name: '未开始'
                    },
                    {
                        value: '1', name: '正在进行'
                    },
                    {
                        value: '2', name: '暂停'
                    },
                    {
                        value: '3', name: '已完成'
                    },
                    {
                        value: '4', name: '终止'
                    }],
                operatorList: [
                    {
                        value: '1', name: '新增'
                    },
                    {
                        value: '2', name: '修改'
                    },
                    {
                        value: '3', name: '删除'
                    },
                    {
                        value: '4', name: '登录'
                    }],
                form: this.$form.createForm(this),
                name: '',
                rangeDate: undefined,
                queryParam: {
                    searchText: '',
                    ip: '',
                    deviceCode: undefined,
                    progress: undefined,
                    operatorName: undefined,
                    moduleCode: undefined,
                    startDate: undefined,
                    endDate: undefined
                },
                regSearchText,
                value: {},
                searchErrorMsg: '',
                startValue: null,
                endValue: null,
                endOpen: false,
                typeList:[]
            }
        },
        props: {
            who: {
                type: String,
                default: ''
            }
        },
        computed: {
            ...mapState({
                formStyle: state => state.common.formStyle,  //表单label，input宽度
                hostStatusList: state => state.common.phyMachineStatusList,
                vlanTypeList: state => state.deviceManage.vlanTypeList,
            })
        },
        methods: {
            emitEmpty ( partant, name ) {
                this[ partant ][ name ] = ''
            },
            /*
             * 只能输入数字
             * */
            removeSpecialChart ( b, type ) {
                if (type === 'ip') {
                    b = b.replace (/[^0-9.]/ig, '')
                    this.queryParam[ type ] = b
                } else {
                    b = b.replace (/[^\u4e00-\u9fa5_a-zA-Z0-9\/-]/ig, '')
                    if (b.length > 36) {
                        b = b.substring (0, 36)
                    }
                    this.queryParam[ type ] = b
                }
            },
            /**
             * Function    : disabledStartDate
             * Description : 对结束时间进行限制
             * Input       : startValue
             * Return      : None
             */
            disabledStartDate (startValue) {
                const endValue = this.endValue;
                if (endValue) {
                    if(moment(startValue).format('YYYY-MM-DD') === moment(endValue).format('YYYY-MM-DD')){
                        return false
                    }
                    return startValue.valueOf() < moment().startOf('day').subtract(36, 'months') || startValue.valueOf() > endValue.valueOf();
                }
                return startValue.valueOf() > moment() || startValue.valueOf() < moment().startOf('day').subtract(36, 'months')
            },
            /**
             * Function    : disabledEndDate
             * Description : 对结束时间进行限制
             * Input       : endValue
             * Return      : None
             */
            disabledEndDate (endValue) {
                const startValue = this.startValue;
                if (startValue) {
                    return startValue.valueOf() >= endValue.valueOf() || endValue.valueOf() > moment()
                }
                return endValue.valueOf() > moment() || endValue.valueOf() < moment().startOf('day').subtract(36, 'months');
            },
            /**
             * Function    : validateSearchText
             * Description : 对搜索框的校验
             * Input       : index,ip
             * Return      : None
             */
            validateSearchText (text,n) {
                text = text || ''
                if (text.length > 30) {
                    text = text.substring(0, 30)
                }
                if(n){
                    this.queryParam.operatorName = text
                }else{
                    this.queryParam.searchText = text
                }
                this.searchErrorMsg = text ? (this.regSearchText.test(text) ? '' : '请输入汉字、字母、数字、_或-字符') : ''
            },
            /**
             * Function    : reStore
             * Description : 重置方法
             * Input       : index,ip
             * Return      : None
             */
            reStore () {
                this.queryParam.searchText = ''
                this.queryParam.deviceCode = undefined
                this.queryParam.progress = undefined
                this.searchErrorMsg = ''
                let opt = ''
                if (this.who === 'loggerList') {
                    this.queryParam.operatorName = undefined
                    this.queryParam.moduleCode = undefined
                    this.startValue = null
                    this.endValue = null
                    this.$emit('getSearchInitLogger', this.queryParam.operatorName, this.queryParam.moduleCode, this.rangeDate)
                } else if (this.who === 'taskList') {
                    opt = this.queryParam.progress
                } else if (this.who === 'productList' || this.who === 'templateList') {
                    opt = this.queryParam.deviceCode
                }else if(this.who === 'function'){
                    this.queryParam.instrumentCode = undefined
                    this.queryParam.functionName = undefined
                    this.queryParam.functionMethod = undefined
                    this.queryParam.functionDesc = undefined
                    this.$emit('getFunctionSearchInit', this.queryParam.instrumentCode, this.queryParam.functionName,this.queryParam.functionMethod,this.queryParam.functionDesc)
                }
                this.$emit('getSearchInit', this.queryParam.searchText, opt)
            },
            /**
             * Function    : toSearch
             * Description : 开始搜索
             * Input       : index,ip
             * Return      : None
             */
            toSearch (e) {
                e.preventDefault()
                if (this.searchErrorMsg === '') {
                    this.queryParam.searchText = (this.queryParam.searchText.trim().length === 0 ? '' : (this.queryParam.searchText.length > 30 ? this.queryParam.searchText.slice(0, 30) : this.queryParam.searchText.trim()))
                    let opt = ''
                    if (this.who === 'loggerList') {
                        if(this.endValue === null && this.startValue){
                            opt = moment(this.startValue).format('YYYY-MM-DD').valueOf()+','+  moment().format('YYYY-MM-DD').valueOf()
                        }
                        if(this.startValue === null && this.endValue){
                            opt = ','+  moment(this.endValue).format('YYYY-MM-DD').valueOf()
                        }
                        if(this.startValue && this.endValue){
                            opt = moment(this.startValue).format('YYYY-MM-DD').valueOf()+','+ moment(this.endValue).format('YYYY-MM-DD').valueOf()
                        }
                        let operator = this.queryParam.operatorName
                        let module = this.queryParam.moduleCode
                        this.$emit('getSearchInitLogger', operator, module, opt)
                    } else if (this.who === 'physicalMachine') {
                        opt = this.queryParam.progress
                    } else if (this.who === 'productList' || this.who === 'templateList') {
                        opt = this.queryParam.deviceCode
                    }else if(this.who === 'function'){
                        this.$emit('getFunctionSearchInit', this.queryParam.instrumentCode,this.queryParam.functionName, this.queryParam.functionDesc,this.queryParam.functionMethod)
                    }
                    this.$emit('getSearchInit', this.queryParam.ip, opt)
                }
            },
            onChange (date, dateString) {
                this.date = dateString
            }
        },
    }
</script>
<style lang="less" scoped>
    .errorMsg {
        font-size: 11px;
        color: red;
        position: absolute;
        z-index: 1;
        margin-top: 26px;
        width: 260px;
        text-align: left
    }
</style>
